<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自制件工艺模板详情</title>
    <!-- 引入 Element UI 的样式 -->
    <link rel="stylesheet" href="../../assets/css/element-ui.css" />
    <link rel="stylesheet" href="../../assets/css/styles.css" />
    <script src="../../assets/js/cdn.js"></script>
    <link rel="stylesheet" href="../../assets/fontawesome-free-6.7.2-web/css/all.min.css" />
  </head>
  <body>
    <div id="app">
      <lx-header slot="header" v-on:toggle="isToggle = !isToggle" :type="2"></lx-header>
      <div class="main-content">
        <div class="content" style="width: 100%">

          <h1 class="module-title">基本信息</h1>
          <div class="center-grid mb-20">
            <el-descriptions :column="4">
              <el-descriptions-item v-for="item in baseInfoHeader" :key="item.fieldApi" :label="item.label">
                <template>
                    <div>{{ formInfo[item.fieldApi] ? formInfo[item.fieldApi]:'-' }}</div>
                </template>
              </el-descriptions-item>
            </el-descriptions>
            <h1 class="module-title">工序列表（{{totalCount}})</h1>
            <el-table v-loading="loading" :data="basePtPus">
              <el-table-column label="工序名称" min-width="150">
                <template slot-scope="scope">
                    <template> {{ scope.row["wpuName"] }} </template>
                  </template>
                </el-table-column>
                <el-table-column label="排序" >
                  <template slot-scope="scope">
                      <template> {{ scope.row["sort"] }} </template>
                  </template>
                </el-table-column>
              <!-- <el-table-column label="操作" align="center" :resizable="false" :show-overflow-tooltip="false" width="220" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text"  @click="detailView(scope.row)">配置</el-button>
                </template>
              </el-table-column> -->
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <script src="../../assets/js/constant.js"></script>
    <script src="../../assets/js/utils.js"></script>
    <script src="../../assets/js/auth.js"></script>
    <script src="../../assets/js/axios.min.js"></script>
    <!-- 引入 Vue.js -->
    <script src="../../assets/js/vue.js"></script>
    <!-- 引入 Element UI 的 JS 文件 -->
    <script src="../../assets/js/element-ui.js"></script>

    <script type="module">
      import LxHeader from '../../pages/components/LxHeader/index.js'
      Vue.component('lx-header', LxHeader)
      checkAuthentication(2)
      new Vue({
        el: '#app',
        components: {},
        data() {
         return {
            currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
            userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
            businessCenters: [
                { name: '订单中心', path: '../index.html' },
                { name: '用户中心', path: '#' },
                { name: '产品中心', path: '#' },
                { name: '库存中心', path: '#' },
                { name: '财务中心', path: '#' },
                { name: '数据中心', path: '#' },
                { name: '系统中心', path: '#' },
                { name: '消息中心', path: '#' }
            ],
            baseInfoHeader: [
              // { label: '生产工艺模板', fieldApi: 'ptName' },
              { label: '部件编号', fieldApi: 'componentCode' },
              { label: '部件名称', fieldApi: 'componentName' }
            ],
            basePtPus:[],
            formInfo: {},
            loading: false,
            detailDialog: false, // 详情
            componentCode: '',
            root_host: root_host,
            request_host: request_host,
            totalCount: 0
          }
        },
        created() {
            this.init()
        },
        methods: {
          exit,
          init() {
            this.componentCode = getUrlParameter('componentCode')
            this.getDetails()
            this.getCrWpus()
          },
          getDetails() {
            // 这里替换为实际的API调用
            axios.get(`${this.request_host}/system/component/` + this.componentCode)
                .then(response => {
                    this.formInfo = response.data.data
                });
          },
          getCrWpus() {
            this.loading = true
            // 这里替换为实际的API调用
            axios.get(`${this.request_host}/system/wpu/queryWpuListByWrCode/` + this.componentCode)
                .then(response => {
                    this.basePtPus = response.data
                  this.totalCount = this.basePtPus.length
                });
            this.loading = false
          },
          openMenu(url) {
            window.open(url)
          },
          detailView(row) {
            const puCode = row.puCode;
            let puDuration = 0;
            if (row.puDuration) {
              puDuration = row.puDuration;
            }
            const params = `puCode=${encodeURIComponent(puCode)}&ptCode=${encodeURIComponent(row.ptCode)}`;
            const url = `pt_pu_item.html?${params}`;
            window.open(url, '_blank');
          },
        }
      })
    </script>
    <style>
      .el-table th.el-table__cell {
        background-color: #f2f2f2; /* 例如，设置为浅灰色 */
      }
    </style>
  </body>
</html>
